<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="../../_third-party/bootstrap/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="../../_src/badge/badge.css" />
		<title></title>
	</head>
	<body>
		<div class="wm-badge">
			<h4>一个数字</h4>
			<hr>
			<!-- 一个数字and多个数字 -->
			<div class="wm-singleton">
				<span class="badge">6</span>
			</div>
			<h4>多个数字</h4>
			<hr>
			<div class="wm-singleton">
				<span class="badge">99+</span>
			</div>
			<!-- 一个数字and多个数字 结束 -->

			<!-- 图标未读状态and文字未读状态 -->
			<h4>图标未读状态</h4>
			<hr>
			<div class="wm-no-number">
				<span class="glyphicon glyphicon-bell" aria-hidden="true"><i></i></span>
			</div>
			<h4>文字未读状态</h4>
			<hr>
			<div class="wm-no-number">
				<span> 提示图标<i></i></span>
			</div>
			<!-- 图标未读状态and文字未读状态 结束-->

			<!-- 文字前带图标状态 -->
			<h4>文字前带图标状态</h4>
			<hr>
			<div class="wm-text-dot">
				<span><i class="default"></i>未开始</span>
			</div>
			<div class="wm-text-dot">
				<span><i class="primary"></i>进行中</span>
			</div>
			<div class="wm-text-dot">
				<span><i class="success"></i>成功</span>
			</div>
			<div class="wm-text-dot">
				<span><i class="danger"></i>失败</span>
			</div>
			<div class="wm-text-dot">
				<span><i class="warning"></i>警告</span>
			</div>
			<!-- 文字前带图标状态 结束-->
		</div>
	</body>
</html>
